<!-- Author:Rain -->
<template>
    <div class="message-box" v-show="visible">
        <div class="message_content">
            <span>{{ message }}</span>
        </div>
        <button v-if="showClose">close</button>
    </div>
</template>

<script setup lang="ts">
import type {MessageProps} from "./type"
import {ref,onMounted,watch} from "vue"

const visible=ref(false)
const props=withDefaults(defineProps<MessageProps>(),{
    duration:3000,
    type:'message'
})

function startTimer(){
if(props.duration===0)return
 setTimeout(() => {
     visible.value=false
 }, props.duration);
}

onMounted(()=>{
    visible.value=true
    startTimer()
})

watch(visible,(newVal)=>{//监听事件将组件移除
    console.log(newVal);
    if(!newVal){
        props.onDestroy()
    }
})

</script>

<style scoped>
.message-box{
    width: max-content;
    position: fixed;
    left: 10%;
    top:20px;
    transform: translateX(-50%);
    border: 1px solid skyblue;
}
</style>